{% extends '../../common/layouts/accLayout.tpl' %}
{% block content %}
	<div class="ui-ucenter-right ui-box">
		<div class="bg-white">
			<div class="ui-box-chead">
				<h3 class="ui-box-chead-title">利息记录</h3>
			</div>
			<div id="search_box" class="fundsOpts">
                <form class="layui-form" action="">
				<ul class="fundsDates fn-clear">
					<li class="liOne">
						<span>时间范围：</span>
					</li>
                    <li id="btntimes" class="mr20">
                        <a class="ibtn" data-type="1" class="layui-btn" lay-submit lay-filter="search_btn">1个月</a>
                        <a class="ibtn" data-type="3" class="layui-btn" lay-submit lay-filter="search_btn">3个月</a>
                        <a class="ibtn" data-type="6" class="layui-btn" lay-submit lay-filter="search_btn">6个月</a>
                    </li>
					<li class="liDate">
                        <input type="hidden" id="month" name="month" />
                        <div class="layui-input-inline">
                            从
                        </div>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="start_t" name="start_t" placeholder="年 /月/日" type="text" value="" >
                        </div>
                        <div class="layui-input-inline">
                            到
                        </div>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="end_t" name="end_t" placeholder="年 /月/日" type="text" value="" >
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit lay-filter="search_btn">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">清空</button>
                        </div>
					</li>
				</ul>
                </form>
			</div>
			<div class="tableList" style="margin-bottom:0px;">
				<table class="layui-hide" id="table" lay-skin="line"></table>
			</div>
		</div>
	</div>
{% endblock %}

{% block js_assets %}
	<script>

        //切换显示 时间范围
        $("#btntimes .ibtn").click(function(){
            $(this).siblings().removeClass('on').end().addClass('on');
            $("#month").val($(this).attr('data-type'));
        });

        var  tableIns;
        layui.use(['form','laydate','table'], function() {
            var laydate = layui.laydate;
            var form = layui.form;
            var table = layui.table;


            laydate.render({
                elem: '#start_t'
                , type: 'date'
            });
            laydate.render({
                elem: '#end_t'
                , type: 'date'
                ,done: function(value, date, endDate){
                    //日期选择完成，清空 1/3/6月
                    $("#btntimes .ibtn").siblings().removeClass('on');
                    $("#month").val('');
                }
            });

            tableIns = table.render({
                elem: '#table'
                ,url:'/myAccount/earning/list'
                ,method:'POST'
                ,where:{
                    funds_type:3
                }
                ,page:true
                ,cols: [[
                    {field:'gmt_create',  title: '时间'}
                    ,{field:'fund_type', title: '类型'}
                    ,{field:'amount', title: '金额（元）',templet:function(d){
                        if(d.amount){
                            return d.amount / 100;
                        }else{
                            return 0;
                        }
                        }}

                ]],
                response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                    , statusCode: 200 //成功的状态码，默认：0
                    , msgName: 'msg' //状态信息的字段名称，默认：msg
                    , countName: 'count' //数据总数的字段名称，默认：count
                    , dataName: 'datas' //数据列表的字段名称，默认：data
            }
            });
            form.on('submit(search_btn)',function(data){
                search(data.field);
                return false;
            });

            function search(search_form_data) {
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        start_time: search_form_data.start_t,
                        end_time: search_form_data.end_t,
                        funds_type:3,
                        month:search_form_data.month
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        });

        function resetForm(){
            $("#btntimes .ibtn").siblings().removeClass('on');
            $("#month").val('');
            $("#start_t").val('');
            $("#end_t").val('');
            tableIns.reload();
            return false;
        }

	</script>

{% endblock %}